<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表白墙</title>
    <script src="jquery.min.js"></script>
</head>
<body>
<div style="width: 100%; text-align: center;">
    <h2>表白墙</h2>
    谁&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: <input id="username" /><p></p>
    对谁说&nbsp;&nbsp;&nbsp;: <input id="tousername" /><p></p>
    说什么&nbsp;&nbsp;&nbsp;: <input id="msg" /><p></p>
    <input type="button" value="提交" onclick="mysub()"/><p></p>
    <div id="div_allmsg">

    </div>
</div>
<script>
			function mysub(){
				var iptUserName=jQuery("#username");
				var iptToUserName=jQuery("#tousername");
				var iptMsg=jQuery("#msg");
				//1.非空效验
				if(iptUserName.val().trim()==""){
					alert("请先输入姓名：");
					iptUserName.focus();
					return;
				}
				if(iptToUserName.val().trim()==""){
					alert("请先输入对方的姓名：");
					iptToUserName.focus();
					return;
				}
				if(iptMsg.val().trim()==""){
					alert("请先输入信息：");
					iptMsg.focus();
					return;
				}
				//2.将内容展示在表白墙上
				jQuery("#div_allmsg").append(iptUserName.val()+"对"+iptToUserName.val()+"说："+iptMsg.val()+"<p></p>");
				//3.清空输入的内容
				iptUserName.val("");
				iptToUserName.val("");
				iptMsg.val("");
			}
		</script>
</body>
</html>